<template>
  <div>

    <carTitle :isShow1="isShow1" :isShow2="isShow2" :isShow3="isShow3" >
      <span slot="title-one" class="title-one">新增车辆</span>
      <span slot="title-two" class="title-two">新增车辆说明说明</span>
    </carTitle>

    <div class="mycar-body">
      <el-row>
        <el-col :span="22" class="body-wrapper">
          <el-row :gutter="10">
            <el-table
              ref="multipleTable"
              :data="tableData3"
              border
              tooltip-effect="dark"
              style="width: 100%"
              >
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                label="车辆信息">
                <template scope="scope">
                  <span>{{ scope.row.carNum }}</span>
                  <span>{{ scope.row.type }}</span>
                  <span>{{ scope.row.lenght }}</span>
                  <span>{{ scope.row.weight }}</span>
                  <span>{{ scope.row.capacity}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="司机信息">
                <template scope="scope">
                  <p class="location">{{scope.row.name}}</p>
                  <p>{{scope.row.tel}}</p>
                </template>
              </el-table-column>
              <el-table-column
                prop="address"
                label="定位信息"
                show-overflow-tooltip>
                <template scope="scope">
                  <p class="location">{{scope.row.location}}</p>
                  <p>{{scope.row.time}}</p>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="6">
              <el-button type="success" id="share">确认分享</el-button>

            </el-col>
          </el-row>
        </el-col>

      </el-row>

    </div>
  </div>
</template>

<script>
  import carTitle from '@/components/car-title'
  import sel from '@/components/select'
  export default {
    data(){
      return {
        value: '',
        input:'',
        inputa: '',
        inputb: '',
        inputc: '',
        inputd: '',
        valuea: '23',
        optionsa: [
          {
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }],
        valueb: '2',
        optionsb: [
          {
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }],
        valuec: '1',
        optionsc: [
          {
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }
        ],
        valued: '1',
        optionsd: [
          {
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }],
        isShow1: false,
        isShow2: false,
        isShow3: true,
        tableData3: [
          {
            carNum: '沪DG5060',
            type: '厢式车',
            lenght: '9.6米',
            weight: '10吨',
            capacity: '30方',
            name: '衣龙葵',
            tel: '123456789',
            location: '山东省烟台市莱阳市G204（龙门西路）',
            time: '2016-11-17 18:52:10',
            cza: '车辆定位',
            czb: '历史轨迹',
            czc: '申请修正',
            del: '删除'
          },
          {
            carNum: '沪DG5060',
            type: '厢式车',
            lenght: '9.6米',
            weight: '10吨',
            capacity: '30方',
            name: '衣龙葵',
            tel: '123456789',
            location: '山东省烟台市莱阳市G204（龙门西路）',
            time: '2016-11-17 18:52:10',
            cza: '车辆定位',
            czb: '历史轨迹',
            czc: '申请修正',
            del: '删除'
          },
          {
            carNum: '沪DG5060',
            type: '厢式车',
            lenght: '9.6米',
            weight: '10吨',
            capacity: '30方',
            name: '衣龙葵',
            tel: '123456789',
            location: '山东省烟台市莱阳市G204（龙门西路）',
            time: '2016-11-17 18:52:10',
            cza: '车辆定位',
            czb: '历史轨迹',
            czc: '申请修正',
            del: '删除'
          }
        ],
         multipleSelection: []
      }
    },
    components: {
      carTitle,
      sel
    },
    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }

  }
</script>
<style lang="scss">
  .title {
    padding: 35px 0 33px 30px;
    .title-one {
      font-size: 20px;
      line-height: 20px;
      font-weight: 700;
      color: #3149a9 !important;
    }
    .title-two {
      line-height: 20px;
      font-size: 14px;
      color: #8b9aaf;
    }
    i {
      font-size: 20px;
      font-weight: 700;
      color: #acafc2;
    }
  }

  .body-wrapper {
    background: #ffffff;
    margin-left: 30px;
    padding: 30px 20px;
    border: 1px solid #e7e8ed;
    .right-title {
      text-align: right;
      padding-right: 15px;
      line-height: 36px;
      height: 36px;
      font-weight: 800;
      color: #AEB5BF;
      font-size: 14px;
    }
    .el-row {
      margin: 10px 0;
    }
    .selects {
      width: 100%;
    }
    #newBtn {
      width: 100%;
    }
    .text {
      font-size: 10px;
      color: gray;
      text-align: center;
      line-height: 2;
    }

  }

  td{
    height: 60px !important;
  }
  #share{
    margin-left: 20px;
  }

</style>
